<template>
  <div id="home">
       <div class="sort">
          <div class="nav">
              <div class="top">
                  <h2>智能</h2>
                  <div class="ic">
                      <span @mouseenter="evenb" :class="{'abu':is}">热门</span>
                      <span @mouseenter="even" :class="{'abu':isRun}" >出行</span>
                  </div>
              </div>
              <div class="but">
                  <div class="left">
                      <ul>
                         
                              <li >
                                  <img src="../../../assets/img/1.jpg" alt="">
                              </li>
                              <li >
                                  <img src="../../../assets/img/2.jpg" alt="">
                              </li>
                      </ul>
                  </div>
                  <div class="right">
                      <ul>
                        <template v-for="item in homee">
                              <li :key="item.id" v-if="is" @click="abu(item.id)" >
                              <img :src="item.s_goods_photos[0].path" alt="">
                              <h4>{{item.name}}</h4>
                              <p>CUP全面屏</p>
                              <span>{{item.price}}元起</span>
                          </li>
                        </template>
                        <template v-for="ite in ho">
                              <li :key="ite.id" v-if="isRun" @click="abu(ite.id)" >
                              <img :src="ite.s_goods_photos[0].path" alt="">
                              <h4>{{ite.name}}</h4>
                              <p>CUP全面屏</p>
                              <span>{{ite.price}}元起</span>
                          </li>
                        </template>
                          <li>
                              <div class="aa">
                                  <div class="ou">
                                      <h4>Redmi 智能电视 MAX 98''</h4>
                                      <p>19999元</p>
                                  </div>
                                  <div class="oo">
                                      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8861fafd390bf76f7446d4db2053560f.jpg?thumb=1&w=125&h=125&f=webp&q=90" alt="">
                                  </div>
                              </div>
                              <div class="bb">
                                   <div class="ou">
                                      <h4>浏览更多</h4>
                                      <p>电视影视</p>
                                  </div>
                                  <div class="oo">
                                      <a-icon type="right-circle" :style="{ fontSize: '40px', color: '#ff6700' }" />
                                  </div>
                              </div>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
data:()=>{
    return{
       homee:[],
       ho:[],
       hh:[],
       isRun:false,
       is:true
    }
},
methods:{
    even(){
        this.isRun=true
        this.is=false
    },
    evenb(){
         this.isRun=false
        this.is=true
    },
    abu(id){
        this.$router.push({name:'shop',query:{id}})
    }
},
   async mounted(){
  let home = await  this._axios.get("/api/goods?project_id=38&classify_id=107");
 
  this.homee=home.data.result.rows
//   console.log(this.homee);
  let hom = await  this._axios.get("/api/goods?project_id=38&classify_id=106");
 
  this.ho=hom.data.result.rows
//   console.log(this.ho);

let b = await this._axios.get('/api/goods/392')
console.log(b);
}
}
</script>

<style lang='scss' scoped>
#home{
     .sort{
       width: 1226px;
       margin: 0 auto;
       
       .nav{
           .top{
            position: relative;
            line-height: 58px;
            .ic{
                position: absolute;
                right: 0;
                top: 0;
                
                span{
                    
                    font-size: 16px;
                    margin-right: 20px;
                    cursor: pointer;
                    // &:hover{
                    //     color: #ff6700;
                    //     border-bottom: 1px solid #ff6700;
                    // }
                   
                }
                 .abu{
                         color: #ff6700;
                        border-bottom: 1px solid #ff6700;
                }
                
            }
           }
           .but{
                 width: 1226px;
                 display: flex;
                 .left{
                     flex: 2;
                    ul{
                       
                        li{
                            cursor: pointer;
                            box-sizing: 0 5px 20px 10px pink;
                            width: 234px;
                            height: 300px;
                            img{
                                width: 100%;
                            }
                            &:nth-of-type(2){
                                margin-top: 15px;
                            }
                        }
                    }
                 }
                 .right{
                     flex: 8;
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        
                        li{
                            cursor: pointer;
                            text-align: center;
                            margin-bottom: 15px;
                            display: inline-block;
                            background-color: #fff;
                            width: 234px;
                            height: 300px;
                            box-sizing: border-box;
                            padding: 20px 0;
                            &:nth-of-type(8){
                                background-color: #f5f5f5;
                                padding: 0;
                                cursor: default;
                                .aa{
                                    background-color: #fff;
                                    height: 145px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    cursor: pointer;
                                    .ou{
                                        width: 115px;
                                        display: inline-block;
                                        text-align: left;
                                        p{
                                            color: #ff6700;
                                        }
                                    }
                                    .oo{
                                        img{
                                            width: 80px;
                                            height: 80px;
                                        }
                                    }
                                }
                                .bb{
                                    cursor: pointer;
                                    margin-top: 12px;
                                    background-color: #fff;
                                    height: 145px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    .ou{
                                        width: 115px;
                                        display: inline-block;
                                        text-align: left;
                                       
                                    }
                                    
                                }
                            }
                           
                            img{
                                width: 160px;
                                height: 160px;
                            }
                            p{
                                font-size: 12px;
                                color: #b0b0b0;
                            }
                            span{
                                color: #ff6700;
                            }
                        }
                    }
                 }
           }
       }
   }
}
</style>